import { Component } from '@angular/core';
import {AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';

function userNameValidator(control: FormControl): {[s:string]:boolean}{
  if(!control.value.match(/^zime/)){
    return{invalidUser:true};
  }
  return{};
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  //对应我们登录的表单
  myForm:FormGroup;

  //输入用户名的输入控件
  userName:AbstractControl;

  //输入密码的输入控件
  password: AbstractControl;

  constructor(private fb:FormBuilder){
    this.myForm = this.fb.group(
    {
      'userName':['sss',Validators.compose([Validators.required,Validators.minLength(7),userNameValidator])],
      'password':['',Validators.required,Validators.minLength(6)]
    }
    );

    this.userName = this.myForm.controls['userName'];
    this.password = this.myForm.controls['password'];
  }

  onSubmit(value:any):void{
    console.log(value);
    
  }
}
